export const worldMap1 = () => {
    return `






    <template>
  <div>
    <div :ref="echartsMap" id="mainChina"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, onMounted } from "vue";
import "echarts";
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value 104.1276279°，纬度30.5370628°
*/
var geoCoordMap = {'阿富汗':[67.709953,33.93911],'安哥拉':[17.873887,-11.202692],'阿尔巴尼亚':[20.168331,41.153332],'阿联酋':[53.847818,23.424076],'阿根廷':[-63.61667199999999,-38.416097],'亚美尼亚':[45.038189,40.069099],'法属南半球和南极领地':[69.348557,-49.280366],'澳大利亚':[133.775136,-25.274398],'奥地利':[14.550072,47.516231],'阿塞拜疆':[47.576927,40.143105],'布隆迪':[29.918886,-3.373056],'比利时':[4.469936,50.503887],'贝宁':[2.315834,9.30769],'布基纳法索':[-1.561593,12.238333],'孟加拉国':[90.356331,23.684994],'保加利亚':[25.48583,42.733883],'巴哈马':[-77.39627999999999,25.03428],'波斯尼亚和黑塞哥维那':[17.679076,43.915886],'白俄罗斯':[27.953389,53.709807],'伯利兹':[-88.49765,17.189877],'百慕大':[-64.7505,32.3078],'玻利维亚':[-63.58865299999999,-16.290154],'巴西':[-51.92528,-14.235004],'文莱':[114.727669,4.535277],'不丹':[90.433601,27.514162],'博茨瓦纳':[24.684866,-22.328474],'中非共和国':[20.939444,6.611110999999999],'加拿大':[-106.346771,56.130366],'瑞士':[8.227511999999999,46.818188],'智利':[-71.542969,-35.675147],
'中国':[88.8946661,37.0731642],'象牙海岸':[-5.547079999999999,7.539988999999999],'喀麦隆':[12.354722,7.369721999999999],'刚果民主共和国':[21.758664,-4.038333],'刚果共和国':[15.827659,-0.228021],'哥伦比亚':[-74.297333,4.570868],'哥斯达黎加':[-83.753428,9.748916999999999],'古巴':[-77.781167,21.521757],'北塞浦路斯':[33.429859,35.126413],'塞浦路斯':[33.429859,35.126413],'捷克共和国':[15.472962,49.81749199999999],'德国':[10.451526,51.165691],'吉布提':[42.590275,11.825138],'丹麦':[9.501785,56.26392],'多明尼加共和国':[-70.162651,18.735693],'阿尔及利亚':[1.659626,28.033886],'厄瓜多尔':[-78.18340599999999,-1.831239],'埃及':[30.802498,26.820553],'厄立特里亚':[39.782334,15.179384],'西班牙':[-3.74922,40.46366700000001],'爱沙尼亚':[25.013607,58.595272],'埃塞俄比亚':[40.489673,9.145000000000001],'芬兰':[25.748151,61.92410999999999],'斐':[178.065032,-17.713371],'福克兰群岛':[-59.523613,-51.796253],'法国':[2.213749,46.227638],'加蓬':[11.609444,-0.803689],'英国':[-3.435973,55.378051],'格鲁吉亚':[-82.9000751,32.1656221],'加纳':[-1.023194,7.946527],'几内亚':[-9.696645,9.945587],'冈比亚':[-15.310139,13.443182],'几内亚比绍':[-15.180413,11.803749],'赤道几内亚':[10.267895,1.650801],'希腊':[21.824312,39.074208],'格陵兰':[-42.604303,71.706936],'危地马拉':[-90.23075899999999,15.783471],'法属圭亚那':[-53.125782,3.933889],'圭亚那':[-58.93018,4.860416],'洪都拉斯':[-86.241905,15.199999],'克罗地亚':[15.2,45.1],'海地':[-72.285215,18.971187],'匈牙利':[19.503304,47.162494],'印尼':[113.921327,-0.789275],
'印度':[78.5553853,12.0201385],'爱尔兰':[-8.24389,53.41291],'伊朗':[53.688046,32.427908],'伊拉克':[43.679291,33.223191],'冰岛':[-19.020835,64.963051],'以色列':[34.851612,31.046051],'意大利':[12.56738,41.87194],'牙买加':[-77.297508,18.109581],'约旦':[36.238414,30.585164],
'日本':[142.1364432,44.8147265 ],
'新加坡':[101.7727739,-0.0589018],
'哈萨克斯坦':[66.923684,48.019573],'肯尼亚':[37.906193,-0.023559],'吉尔吉斯斯坦':[74.766098,41.20438],'柬埔寨':[104.990963,12.565679],'韩国':[127.766922,35.907757],'科索沃':[20.902977,42.6026359],'科威特':[47.481766,29.31166],'老挝':[102.495496,19.85627],'黎巴嫩':[35.862285,33.854721],'利比里亚':[-9.429499000000002,6.428055],'利比亚':[17.228331,26.3351],'斯里兰卡':[80.77179699999999,7.873053999999999],'莱索托':[28.233608,-29.609988],'立陶宛':[23.881275,55.169438],'卢森堡':[6.129582999999999,49.815273],'拉脱维亚':[24.603189,56.879635],'摩洛哥':[-7.092619999999999,31.791702],'摩尔多瓦':[28.369885,47.411631],'马达加斯加':[46.869107,-18.766947],'墨西哥':[-102.552784,23.634501],'马其顿':[21.745275,41.608635],'马里':[-3.996166,17.570692],'缅甸':[95.956223,21.913965],'黑山':[19.37439,42.708678],'蒙古':[103.846656,46.862496],'莫桑比克':[35.529562,-18.665695],'毛里塔尼亚':[-10.940835,21.00789],'马拉维':[34.301525,-13.254308],'马来西亚':[101.975766,4.210484],'纳米比亚':[18.49041,-22.95764],'新喀里多尼亚':[165.618042,-20.904305],'尼日尔':[8.081666,17.607789],'尼日利亚':[8.675277,9.081999],'尼加拉瓜':[-85.207229,12.865416],'荷兰':[5.291265999999999,52.132633],'挪威':[8.468945999999999,60.47202399999999],'尼泊尔':[84.12400799999999,28.394857],'新西兰':[174.885971,-40.900557],'阿曼':[55.923255,21.512583],'巴基斯坦':[69.34511599999999,30.375321],'巴拿马':[-80.782127,8.537981],'秘鲁':[-75.015152,-9.189967],'菲律宾':[121.774017,12.879721],'巴布亚新几内亚':[143.95555,-6.314992999999999],'波兰':[19.145136,51.919438],'波多黎各':[-66.590149,18.220833],'北朝鲜':[127.510093,40.339852],'葡萄牙':[-8.224454,39.39987199999999],'巴拉圭':[-58.443832,-23.442503],'卡塔尔':[51.183884,25.354826],'罗马尼亚':[24.96676,45.943161],'俄罗斯':[105.318756,61.52401],'卢旺达':[29.873888,-1.940278],'西撒哈拉':[-12.885834,24.215527],'沙特阿拉伯':[45.079162,23.885942],'苏丹':[30.217636,12.862807],'南苏丹':[31.3069788,6.876991899999999],'塞内加尔':[-14.452362,14.497401],'所罗门群岛':[160.156194,-9.64571],'塞拉利昂':[-11.779889,8.460555],'萨尔瓦多':[-88.89653,13.794185],'索马里兰':[46.8252838,9.411743399999999],'索马里':[46.199616,5.152149],'塞尔维亚共和国':[21.005859,44.016521],'苏里南':[-56.027783,3.919305],'斯洛伐克':[19.699024,48.669026],'斯洛文尼亚':[14.995463,46.151241],'瑞典':[18.643501,60.12816100000001],'斯威士兰':[31.465866,-26.522503],'叙利亚':[38.996815,34.80207499999999],'乍得':[18.732207,15.454166],'多哥':[0.824782,8.619543],'泰国':[100.992541,15.870032],'塔吉克斯坦':[71.276093,38.861034],'土库曼斯坦':[59.556278,38.969719],'东帝汶':[125.727539,-8.874217],'特里尼达和多巴哥':[-61.222503,10.691803],'突尼斯':[9.537499,33.886917],'土耳其':[35.243322,38.963745],'坦桑尼亚联合共和国':[34.888822,-6.369028],'乌干达':[32.290275,1.373333],'乌克兰':[31.16558,48.379433],'乌拉圭':[-55.765835,-32.522779],'美国':[-95.712891,37.09024],'乌兹别克斯坦':[64.585262,41.377491],'委内瑞拉':[-66.58973,6.42375],'越南':[108.277199,14.058324],'瓦努阿图':[166.959158,-15.376706],'西岸':[35.3027226,31.9465703],'也门':[48.516388,15.552727],'南非':[22.937506,-30.559482],'赞比亚':[27.849332,-13.133897],'津巴布韦':[29.154857,-19.015438]};
var data_tmp = [
    { name: '法国', value: 42 },
       { name: '新加坡', value: 42 },
         { name: '澳大利亚', value: 42 },
      { name: '美国', value: 42 },
     { name: '墨西哥', value: 42 },
    { name: '日本', value: 81 }];
var max = 480,
    min = 9; // todo
var maxSize4Pin = 100,
    minSize4Pin = 20;

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),
                color:"#c48"
            });
        }
    }
    return res;
};
let echartsMapel: any = ref("");
const echartsMap = (e: any) => (echartsMapel.value = e);
const init = (china) => {
  // 基于准备好的dom，初始化echarts实例
  echarts.registerMap("world", china as any);
  var myChart = echarts.init(echartsMapel.value);
  // 指定图表的配置项和数据
  var options: any = {
        geo: {
        map: 'world',
        zoom: 1,
        show: true,
        roam: true,
        label: {
            normal: {
                show: false,
            },
            emphasis: {
                show: false,
            },
        },
        itemStyle: {
            normal: {
                areaColor: '#01B7F9',
              //  borderColor: '#01B7F9', //线
                shadowColor: '#01B7F9', //外发光
                shadowBlur: 1,
            },
            emphasis: {
                areaColor: '#01B7F9', //悬浮区背景
            },
        },
    },
    series: [
      {
        type: 'map',
        mapType: 'world',
        itemStyle: {
            areaColor: '#01B7F9',
        },
        emphasis: {
            itemStyle: {
                areaColor: '#E8D3E3'
            }
        },
        data: [{
        name: "中国",
        itemStyle: {
            borderColor: '#68FAFF',
            areaColor:'#68FAFF',
        },
        emphasis: {
            itemStyle: {
                areaColor: '#2585a6'
            },
            label: {
                show: true,
                color: '#fff',
            }
        },
    }]
    },
         {
            symbolSize: 5,
            label: {
                normal: {
                    position: 'top',
                    show: true,//是否显示地名
                                
                              formatter: function(params) {
                                console.log(params)
                        return '{a| '+params.name+':'+params.value[2]+'}';
                      },
                      rich: {
                        a: {
                          color: "#FFF",
                          fontSize: 12,
                          align: "center",
                         padding:[5,8],
                          backgroundColor:"#F29100",
                           borderRadius:5,
                          fontWeight: 600,
                        }, 
                    
                      },
                },
                emphasis: {
                    show: true,
                },
            },
            itemStyle: {
                normal: {
                   borderColor:"#FFF",
                    color: 'rgba(242, 145, 0, 1)',
                },
            },
            name: 'light',
            type: 'scatter',
            coordinateSystem: 'geo',
            data:convertData(data_tmp),
        },
    ],

    tooltip: {
      show:false,
      trigger: "item",
    },

  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(options);
};
const state = reactive({});
onMounted(() => {
  fetch("/vue.example/echarts/ChinaCenterWorld.json").then(function (response) {
    //response.status表示响应的http状态码
    if (response.status === 200) {
        // json是返回的response提供的一个方法,
        // 会把返回的json字符串反序列化成对象,也被包装成一个Promise了
     return response.json()
        //
    } else {
        return {};
    }
})    .then(function (data) {
        //响应的内容
         init(data);
        // 响应数据格式化
    });
 
});
</script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  

    `;
  };
  